<template>
  <div class="mod-sp__spmatchitemteam">
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.teamName" placeholder="代表队名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.realName" placeholder="选手姓名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.company" placeholder="单位" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.status" placeholder="选择状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="审核中" value="0"></el-option>
          <el-option label="报名成功" value="1"></el-option>
          <el-option label="完赛" value="2"></el-option>
          <el-option label="已取消/弃权" value="3"></el-option>
          <el-option label="比赛中" value="4"></el-option>
          <el-option label="已获晋级赛资格" value="5"></el-option>
          <el-option label="晋级成功" value="6"></el-option>
          <el-option label="弃权" value="7"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <!--
      <el-form-item>
        <el-button type="primary" @click="exportHandle()">导出记录</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="uploadCertificate()">导入成绩</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createCertificateNo()">生成证书编号</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="certificateHandle()">生成证书图片</el-button>
      </el-form-item>
      -->

      <!--
      <el-form-item>
        <el-button type="info" @click="exportHandle()">{{ $t("export") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="hasPermission('sp:spmatchitemteam:save')" type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="hasPermission('sp:spmatchitemteam:delete')" type="danger" @click="deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </el-form-item>
      -->
    </el-form>
    <div v-if="dataList && dataList.length > 0" style="margin-bottom: 10px">
      <el-tag size="big">{{ dataList ? dataList[0].matchName : "" }}</el-tag>
      <el-tag size="big" style="margin-left: 10px">{{ dataList ? dataList[0].item : "" }}</el-tag>
      <el-tag size="big" style="margin-left: 10px">{{ dataList ? dataList[0].dictLabel : "" }}</el-tag>
    </div>

    <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="id" width="80" label="序号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="teamName" width="250" label="代表队" header-align="center" align="center"></el-table-column>
      <el-table-column prop="realName" width="150" label="选手" header-align="center" align="center">
        <template v-slot="scope">
          <el-button type="text" @click="detailHandle(scope.row.userId)">{{ scope.row.realName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="ticket" width="150" label="选手编号" header-align="center" align="center">
        <template v-slot="scope">
          {{ hideTicket(scope.row.ticket) }}
        </template>
      </el-table-column>
      <el-table-column prop="company" width="250" label="学校/单位" header-align="center" align="center"></el-table-column>
      <el-table-column prop="score1" v-if="colData[0].istrue" width="100" label="时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="score2" v-if="colData[1].istrue" width="100" label="成绩" header-align="center" align="center"></el-table-column>
      <el-table-column prop="ranks" width="100" label="名次" header-align="center" align="center"></el-table-column>
      <el-table-column prop="grade" width="100" label="奖等" header-align="center" align="center"></el-table-column>
      <el-table-column prop="certificate" width="100" label="证书编号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="status" width="120" label="状态" header-align="center" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status === 0" size="small" type="">审核中</el-tag>
          <el-tag v-else-if="scope.row.status === 1" size="small" type="">报名成功</el-tag>
          <el-tag v-else-if="scope.row.status === 2" size="small" type="">完赛</el-tag>
          <el-tag v-else-if="scope.row.status === 3" size="small" type="">已取消/弃权</el-tag>
          <el-tag v-else-if="scope.row.status === 4" size="small" type="">比赛中</el-tag>
          <el-tag v-else-if="scope.row.status === 5" size="small" type="">已获晋级赛资格</el-tag>
          <el-tag v-else-if="scope.row.status === 6" size="small" type="">晋级成功</el-tag>
          <el-tag v-else-if="scope.row.status === 7" size="small" type="">弃权</el-tag>
          <el-tag v-else-if="scope.row.status === 8" size="small" type="">驳回</el-tag>
          <el-tag v-else size="small" type="">其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button type="text" size="small" v-if="scope.row.status === 1 && scope.row.matchLevel != '1'" @click="riseHandle(scope.row.matchItemTeamId)">晋级</el-button>
          <el-button type="text" size="small" v-if="scope.row.status === 1" @click="cancleHandle(scope.row.id)">弃权</el-button>
          <!--
          <el-button type="text" size="small" v-if="scope.row.status === 1 || scope.row.status === 2" @click="infoHandle(scope.row.certificateUrl)">证书</el-button>
          <el-button type="text" size="small" v-if="scope.row.status === 1 || scope.row.status === 2" @click="infoHandle(scope.row.certificateUrl)">下载</el-button>
          <el-button type="text" size="small" v-if="scope.row.status === 1 || scope.row.status === 2" @click="updateHandle(scope.row.id)">删除</el-button>
          -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <upload v-if="uploadVisible3" ref="upload3" uploadurl="/sp/spmatchitemteam/importMatchScore" downloadurl="/sp/spmatchitemteam/exportMatchScoreError" @refreshDataList="getDataList"></upload>
    <detail v-if="detailVisible" ref="send" @refreshDataList="getDataList"></detail>
  </div>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import { defineComponent, reactive, toRefs } from "vue";
import AddOrUpdate from "./spmatchitemteam-add-or-update.vue";
import baseService from "@/service/baseService";
import app from "@/constants/app";
import qs from "qs";
import { getToken } from "@/utils/cache";
import Upload from "./score-upload.vue";
import Detail from "@/views/sp/spuser-detail.vue";
export default defineComponent({
  components: {
    AddOrUpdate,
    Upload,
    Detail
  },
  setup() {
    const state = reactive({
      uploadVisible3: false,
      getDataListURL: "/sp/spmatchitemteam/signRecord",
      createdIsNeed: false,
      activatedIsNeed: false,
      getDataListIsPage: true,
      exportURL: "/sp/spmatchitemteam/export",
      deleteURL: "/sp/spmatchitemteam",
      deleteIsBatch: true,
      dataForm: {
        matchName: "",
        item: "",
        matchItemId: "",
        teamId: "",
        teamName: "",
        isRise: "",
        status: "",
        company: "",
        realName: ""
      },
      colData: [
        { title: "score1", istrue: false },
        { title: "score2", istrue: false }
      ],
      detailVisible: false
    });
    return { ...useView(state), ...toRefs(state) };
  },
  watch: {},
  mounted() {
    //获取上个页面传来的参数
    this.dataForm.matchItemId = this.$route.query.matchItemId + "";
    this.queryBaseMatchItem();
    this.query();
  },
  methods: {
    // 调用后台方法rise，晋级当前参赛小组
    riseHandle(id?: string) {
      this.$confirm("确认晋级？", this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      }).then(() => {
        baseService.post("/sp/spmatchitemteam/rise", { id: id, status: "1" }).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.query();
          }
        });
      });
    },
    passHandle(id?: string) {
      this.$confirm("确认审核通过？", this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      }).then(() => {
        baseService.post("/sp/spmatchitemteam/pass", { id: id }).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.query();
          }
        });
      });
    },
    // 弃权
    cancleHandle(id?: string) {
      this.$confirm("确认弃权？", "弃权", {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      }).then(() => {
        baseService.post("/sp/spmatchitemteam/cancel", { id: id }).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.query();
          }
        });
      });
    },
    //查询赛项详情
    queryBaseMatchItem() {
      baseService.post("/sp/spmatchitem/queryBaseMatchItem", { id: this.dataForm.matchItemId }).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        } else {
          let data = res.data;
          let scores = data.scores;
          if (scores) {
            let scoreArr = scores.split(",");
            for (let i = 0; i < scoreArr.length; i++) {
              if (scoreArr[i] === "score1") {
                this.colData[0].istrue = true;
              }
              if (scoreArr[i] === "score2") {
                this.colData[1].istrue = true;
              }
            }
            console.log(this.colData);
          }
        }
      });
    },
    zhengshuHandle() {
      let ids: string[] = [];
      for (let i = 0; i < this.dataListSelections!.length; i++) {
        ids.push(this.dataListSelections![i].id);
      }
      window.location.href = `${app.api}/sp/spmatchitemteam/downloadFile?${qs.stringify({
        ...this.dataForm,
        token: getToken(),
        ids: ids.join(",")
      })}`;
    },
    uploadCertificate() {
      this.uploadVisible3 = true;
      this.$nextTick(() => {
        this.$refs.upload3.init();
      });
    },

    // 生成证书
    certificateHandle(id?: string) {
      this.$confirm("确认生成证书？", "生成证书", {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      }).then(() => {
        baseService.post("/sp/spmatchitemteam/certificate", { id: id }).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.query();
          }
        });
      });
    },

    // 查看证书
    infoHandle(info: string) {
      window.open(info);
    },

    updateHandle(id: number) {
      this.$confirm("确认删除证书？", "删除证书", {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      }).then(() => {
        baseService.get("/sp/spmatchitemteam/delCertificate?id=" + id, {}).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.query();
          }
        });
      });
    },

    /**
     * 证件号隐藏前三位
     */
    hideTicket(ticket: string): string {
      //隐藏前三位
      return ticket && ticket.length > 3 ? ticket.substr(3, ticket.length) : ticket;
    },

    detailHandle(id?: string) {
      this.detailVisible = true;
      baseService.get("/sp/spuser/" + id).then((e: any) => {
        this.$nextTick(() => {
          if (e.data) {
            e.data.sex = e.data.sex == 0 ? "女" : "男";
          }
          this.$refs.send.dataForm.row = e.data;
          this.$refs.send.init();
        });
      });
    },
    /**
     * 生成证书编号
     */
    createCertificateNo() {
      this.$confirm("确认生产证书编号？", "生成证书编号", {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      }).then(() => {
        baseService.get("/sp/spmatchitemteam/createCertificateNo", { matchItemId: this.dataForm.matchItemId }).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.query();
          }
        });
      });
    }
  }
});
</script>
